<template>
  <div class="flex gap-2 flex-wrap">
    <el-tag
      v-for="tag in dynamicTags"
      :key="tag"
      :type="selectedTags.includes(tag.id) ? 'primary' : 'info'"
      :closable="true"
      :disable-transitions="false"
      :class="{ 'is-selected': selectedTags.includes(tag.id) }"
      @close="handleClose(tag.id)"
      @click="toggleSelect(tag.id)"
    >
      {{ tag.name }}
    </el-tag>
    <el-input
      v-if="inputVisible"
      ref="InputRef"
      v-model="inputValue"
      class="w-20"
      size="small"
      minlength="1"
      maxlength="20"
      @keyup.enter="handleInputConfirm"
      @blur="handleInputConfirm"
    />
    <el-button v-else class="button-new-tag" size="small" @click="showInput">
      + 请输入名称，回车添加新的规格
    </el-button>
  </div>
</template>

<script lang="ts" setup>
const emit = defineEmits(["update:modelValue"]);
import { ElInput } from "element-plus";
import type { InputInstance } from "element-plus";
const props = defineProps({
  // 所有的tag
  tags: {
    type: Array as PropType<{ id: string; name: string }[]>,
    default: () => [],
  },
  // 选中的tag
  modelValue: {
    type: Array as PropType<{ id: string; name: string }[]>,
    default: () => [],
  },
  // 是否可以切换选中
  canSwitch: {
    type: Boolean,
    default: true,
  },
});
const inputValue = ref("");
const dynamicTags = ref(props.tags);
const selectedTags = ref<string[]>([]);
const inputVisible = ref(false);
const InputRef = ref<InputInstance>();

const handleClose = (id: string) => {
  ElMessageBox.confirm("确定要删除标签吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    const findIndex = dynamicTags.value.findIndex((t) => t.id === id);
    if (findIndex !== -1) {
      dynamicTags.value.splice(findIndex, 1);
      selectedTags.value = selectedTags.value.filter((t) => t !== id);
      handleChange();
    }
  });
};

const toggleSelect = (tag: string) => {
  if (!props.canSwitch) {
    return;
  }
  if (selectedTags.value.includes(tag)) {
    selectedTags.value = selectedTags.value.filter((t) => t !== tag);
  } else {
    selectedTags.value.push(tag);
  }
  handleChange();
};

const showInput = () => {
  inputVisible.value = true;
  nextTick(() => {
    InputRef.value!.input!.focus();
  });
};

const handleChange = () => {
  let selectedTagItems = dynamicTags.value.filter((t) => selectedTags.value.includes(t.id));
  emit("update:modelValue", selectedTagItems);
};
const handleInputConfirm = () => {
  if (inputValue.value) {
    if (!inputValue.value.trim()) {
      ElMessage.error("规格名称不能为空");
      inputVisible.value = false;
      return;
    }
    dynamicTags.value.push({ id: inputValue.value + "tag", name: inputValue.value });
    selectedTags.value.push(inputValue.value + "tag");
  }
  handleChange();
  inputVisible.value = false;
  inputValue.value = "";
};
watchEffect(() => {
  dynamicTags.value = props.tags;
});
watchEffect(() => {
  selectedTags.value = props.modelValue.map((item) => item.id);
});
</script>
<style scoped>
.is-selected {
  border-color:;
  background-color: #e3f3ff;
}
</style>
